<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
	<center>
		<h2>天气</h2>
		<table>
			<input type="text" name="city" id="city" >
		</table>
		 <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</center>
</body>
</html>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$("#city").blur(function(){
		var city = $(this).val();
		// alert(city);
		var len = city.length;
		// alert(len);
		if(city == "")
		{
			alert("内容为空");
			return false;
		}
		if(len >=30)
		{
			alert("长度不能大于30");
			return false;
		}
		// alert(city);
		$.ajax({
			url:"weather.php",
			data:{city:city},
			type:"post",
			dataType:"json",
			success:function(res){
					// console.log(res.result);
					var days = res.days;
					var citynm = res[0].citynm;
					// console.log(citynm);
					var week = "";
					var temp = "[";
					$(res).each(function(i,v){
						// console.log(v.week);
						week +=v.week+",";
						temp +="["+v.temp_low+","+v.temp_high+"],"; //[-9.7, 9.4],
					})
					week = week.split(",");
					temp += "]";
					// console.log(week);
					// var res = JSON.parse(res);							
					var chart = Highcharts.chart('container', {
				    chart: {
				        type: 'columnrange', // columnrange 依赖 highcharts-more.js
				        inverted: true
				    },
				    title: {
				        text: '每周温度变化范围'
				    },
				    subtitle: {
				        text: citynm
				    },
				    xAxis: {
				        categories: week
				    },
				    yAxis: {
				        title: {
				            text: '温度 ( °C )'
				        }
				    },
				    tooltip: {
				        valueSuffix: '°C'
				    },
				    plotOptions: {
				        columnrange: {
				            dataLabels: {
				                enabled: true,
				                formatter: function () {
				                    return this.y + '°C';
				                }
				            }
				        }
				    },
				    legend: {
				        enabled: false
				    },
				    series: [{
				        name: '温度',
				        data:eval(temp)
				    }]
				});
			}
		})
	})
	
</script>